<template>
  <view>
    <view>
      <input class="input" type="text" placeholder="输入想看的内容" />
      <button class="btn">搜索</button>
    </view>
    <view class="ispan">
      <view class="item">全部</view>
      <view class="item">今日推荐</view>
      <view class="item">热度</view>
    </view>
    <!-- 失物招领模块 -->
    <view class="main">
      <view v-for="(item,index) in 7" :key="index">
        <view class="LossItem">
          <img
            class="avatar"
            src="https://img2.baidu.com/it/u=827995434,2519090319&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
            alt="头像"
          />:
          <text style="color:red">我丢了一部iphone13promax各位大哥可以帮我找找嘛谢谢大家</text>
        </view>
        <view class="content">
          <img
            style="width: 240rpx; height: 200rpx; margin-right: 10rpx ;margin-top:5rpx"
            src="https://img2.baidu.com/it/u=786921120,876192216&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067"
            alt="iphone13promax"
          />
          <img
            style="width: 240rpx; height: 200rpx; margin-right: 10rpx"
            src="https://img2.baidu.com/it/u=786921120,876192216&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067"
            alt="iphone13promax"
          />
          <img
            style="width: 240rpx; height: 200rpx"
            src="https://img2.baidu.com/it/u=786921120,876192216&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067"
            alt="iphone13promax"
          />
        </view>
        <view class="hb">
          <text>日期:2025-9-14</text>
          <text>点赞:999</text>
          <text>收藏:798</text>
          <button class="btn">评论</button>
        </view>
        <view>
          
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
</script>

<style scrop>
.btn {
  width: 200rpx;
  height: 85rpx;
  background-color: pink;
  display: inline-block;
}
.input {
  display: inline-block;
  border: 2rpx solid #ccc;
  width: 530rpx;
  height: 80rpx;
  background-color: #cfc;
  margin-left: 10rpx;
}
.ispan {
  display: flex;
  justify-content: space-around;
  margin-right: 154rpx;
}
.ispan .item {
  background-color: greenyellow;
  width: 180rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.LossItem {
  width: 750rpx;
  margin-left: 10rpx;
  margin-top:10rpx;
}
.LossItem .avatar {
  width: 60rpx;
  height: 60rpx;
  border: 2rpx;
  border-radius: 50%;
}
.content {
  margin-left: 10rpx;
}
.hb{
  display:flex;
  width:750rpx;
  justify-content:start
}
.hb text{
  
  margin-right:20rpx;
  margin-top:40rpx;

}
</style>